<style type="text/css">
    #mytbl{
        width:200px;
        height: 300px;
    }
    #mytbl tr,#mytbl th,#mytbl td{
        border:1px solid blue;
        text-align: center;
    }
</style>
<my-header></my-header>
<!-- Header End====================================================================== -->
<my-carousel></my-carousel>
<div id="mainBody">
    <div class="container">
        <div class="row">
            <!-- Sidebar ================================================== -->
            <my-sidebar></my-sidebar>
            <!-- Sidebar end=============================================== -->
            <div class="span9">

                <table id="mytbl" style="margin: 200px auto;border-collapse: collapse;border:1px solid blue;">
                    <tr>
                        <th>商品名称</th>
                        <th>价格</th>
                    </tr>
                    <tr *ngFor="let product of productArray">
                        <td>{{product.name}}</td>
                        <td>{{product.price}}</td>
                    </tr>
                </table>





                <!--<div class="well well-small">-->
                    <!--<h4>Featured Products-->
                        <!--<small class="pull-right">200+ featured products</small>-->
                    <!--</h4>-->
                    <!--<div class="row-fluid">-->
                        <!--<div id="featured" class="carousel slide">-->
                            <!--<div class="carousel-inner">-->
                                <!--<div class="item active">-->
                                    <!--<ul class="thumbnails">-->
                                        <!--<li class="span3">-->
                                            <!--<div class="thumbnail">-->
                                                <!--<i class="tag"></i>-->
                                                <!--<a href="product_details.html"><img src="themes/images/products/b1.jpg"-->
                                                                                    <!--alt=""></a>-->
                                                <!--<div class="caption">-->
                                                    <!--<h5>Product name</h5>-->
                                                    <!--<h4><a class="btn" href="product_details.html">VIEW</a> <span-->
                                                            <!--class="pull-right">$222.00</span></h4>-->
                                                <!--</div>-->
                                            <!--</div>-->
                                        <!--</li>-->
                                        <!--<li class="span3">-->
                                            <!--<div class="thumbnail">-->
                                                <!--<i class="tag"></i>-->
                                                <!--<a href="product_details.html"><img src="themes/images/products/b2.jpg"-->
                                                                                    <!--alt=""></a>-->
                                                <!--<div class="caption">-->
                                                    <!--<h5>Product name</h5>-->
                                                    <!--<h4><a class="btn" href="product_details.html">VIEW</a> <span-->
                                                            <!--class="pull-right">$222.00</span></h4>-->
                                                <!--</div>-->
                                            <!--</div>-->
                                        <!--</li>-->
                                        <!--<li class="span3">-->
                                            <!--<div class="thumbnail">-->
                                                <!--<i class="tag"></i>-->
                                                <!--<a href="product_details.html"><img src="themes/images/products/b3.jpg"-->
                                                                                    <!--alt=""></a>-->
                                                <!--<div class="caption">-->
                                                    <!--<h5>Product name</h5>-->
                                                    <!--<h4><a class="btn" href="product_details.html">VIEW</a> <span-->
                                                            <!--class="pull-right">$222.00</span></h4>-->
                                                <!--</div>-->
                                            <!--</div>-->
                                        <!--</li>-->
                                        <!--<li class="span3">-->
                                            <!--<div class="thumbnail">-->
                                                <!--<i class="tag"></i>-->
                                                <!--<a href="product_details.html"><img src="themes/images/products/b4.jpg"-->
                                                                                    <!--alt=""></a>-->
                                                <!--<div class="caption">-->
                                                    <!--<h5>Product name</h5>-->
                                                    <!--<h4><a class="btn" href="product_details.html">VIEW</a> <span-->
                                                            <!--class="pull-right">$222.00</span></h4>-->
                                                <!--</div>-->
                                            <!--</div>-->
                                        <!--</li>-->
                                    <!--</ul>-->
                                <!--</div>-->
                                <!--<div class="item">-->
                                    <!--<ul class="thumbnails">-->
                                        <!--<li class="span3">-->
                                            <!--<div class="thumbnail">-->
                                                <!--<i class="tag"></i>-->
                                                <!--<a href="product_details.html"><img src="themes/images/products/5.jpg"-->
                                                                                    <!--alt=""></a>-->
                                                <!--<div class="caption">-->
                                                    <!--<h5>Product name</h5>-->
                                                    <!--<h4><a class="btn" href="product_details.html">VIEW</a> <span-->
                                                            <!--class="pull-right">$222.00</span></h4>-->
                                                <!--</div>-->
                                            <!--</div>-->
                                        <!--</li>-->
                                        <!--<li class="span3">-->
                                            <!--<div class="thumbnail">-->
                                                <!--<i class="tag"></i>-->
                                                <!--<a href="product_details.html"><img src="themes/images/products/6.jpg"-->
                                                                                    <!--alt=""></a>-->
                                                <!--<div class="caption">-->
                                                    <!--<h5>Product name</h5>-->
                                                    <!--<h4><a class="btn" href="product_details.html">VIEW</a> <span-->
                                                            <!--class="pull-right">$222.00</span></h4>-->
                                                <!--</div>-->
                                            <!--</div>-->
                                        <!--</li>-->
                                        <!--<li class="span3">-->
                                            <!--<div class="thumbnail">-->
                                                <!--<a href="product_details.html"><img src="themes/images/products/7.jpg"-->
                                                                                    <!--alt=""></a>-->
                                                <!--<div class="caption">-->
                                                    <!--<h5>Product name</h5>-->
                                                    <!--<h4><a class="btn" href="product_details.html">VIEW</a> <span-->
                                                            <!--class="pull-right">$222.00</span></h4>-->
                                                <!--</div>-->
                                            <!--</div>-->
                                        <!--</li>-->
                                        <!--<li class="span3">-->
                                            <!--<div class="thumbnail">-->
                                                <!--<a href="product_details.html"><img src="themes/images/products/8.jpg"-->
                                                                                    <!--alt=""></a>-->
                                                <!--<div class="caption">-->
                                                    <!--<h5>Product name</h5>-->
                                                    <!--<h4><a class="btn" href="product_details.html">VIEW</a> <span-->
                                                            <!--class="pull-right">$222.00</span></h4>-->
                                                <!--</div>-->
                                            <!--</div>-->
                                        <!--</li>-->
                                    <!--</ul>-->
                                <!--</div>-->
                                <!--<div class="item">-->
                                    <!--<ul class="thumbnails">-->
                                        <!--<li class="span3">-->
                                            <!--<div class="thumbnail">-->
                                                <!--<a href="product_details.html"><img src="themes/images/products/9.jpg"-->
                                                                                    <!--alt=""></a>-->
                                                <!--<div class="caption">-->
                                                    <!--<h5>Product name</h5>-->
                                                    <!--<h4><a class="btn" href="product_details.html">VIEW</a> <span-->
                                                            <!--class="pull-right">$222.00</span></h4>-->
                                                <!--</div>-->
                                            <!--</div>-->
                                        <!--</li>-->
                                        <!--<li class="span3">-->
                                            <!--<div class="thumbnail">-->
                                                <!--<a href="product_details.html"><img src="themes/images/products/10.jpg"-->
                                                                                    <!--alt=""></a>-->
                                                <!--<div class="caption">-->
                                                    <!--<h5>Product name</h5>-->
                                                    <!--<h4><a class="btn" href="product_details.html">VIEW</a> <span-->
                                                            <!--class="pull-right">$222.00</span></h4>-->
                                                <!--</div>-->
                                            <!--</div>-->
                                        <!--</li>-->
                                        <!--<li class="span3">-->
                                            <!--<div class="thumbnail">-->
                                                <!--<a href="product_details.html"><img src="themes/images/products/11.jpg"-->
                                                                                    <!--alt=""></a>-->
                                                <!--<div class="caption">-->
                                                    <!--<h5>Product name</h5>-->
                                                    <!--<h4><a class="btn" href="product_details.html">VIEW</a> <span-->
                                                            <!--class="pull-right">$222.00</span></h4>-->
                                                <!--</div>-->
                                            <!--</div>-->
                                        <!--</li>-->
                                        <!--<li class="span3">-->
                                            <!--<div class="thumbnail">-->
                                                <!--<a href="product_details.html"><img src="themes/images/products/1.jpg"-->
                                                                                    <!--alt=""></a>-->
                                                <!--<div class="caption">-->
                                                    <!--<h5>Product name</h5>-->
                                                    <!--<h4><a class="btn" href="product_details.html">VIEW</a> <span-->
                                                            <!--class="pull-right">$222.00</span></h4>-->
                                                <!--</div>-->
                                            <!--</div>-->
                                        <!--</li>-->
                                    <!--</ul>-->
                                <!--</div>-->
                                <!--<div class="item">-->
                                    <!--<ul class="thumbnails">-->
                                        <!--<li class="span3">-->
                                            <!--<div class="thumbnail">-->
                                                <!--<a href="product_details.html"><img src="themes/images/products/2.jpg"-->
                                                                                    <!--alt=""></a>-->
                                                <!--<div class="caption">-->
                                                    <!--<h5>Product name</h5>-->
                                                    <!--<h4><a class="btn" href="product_details.html">VIEW</a> <span-->
                                                            <!--class="pull-right">$222.00</span></h4>-->
                                                <!--</div>-->
                                            <!--</div>-->
                                        <!--</li>-->
                                        <!--<li class="span3">-->
                                            <!--<div class="thumbnail">-->
                                                <!--<a href="product_details.html"><img src="themes/images/products/3.jpg"-->
                                                                                    <!--alt=""></a>-->
                                                <!--<div class="caption">-->
                                                    <!--<h5>Product name</h5>-->
                                                    <!--<h4><a class="btn" href="product_details.html">VIEW</a> <span-->
                                                            <!--class="pull-right">$222.00</span></h4>-->
                                                <!--</div>-->
                                            <!--</div>-->
                                        <!--</li>-->
                                        <!--<li class="span3">-->
                                            <!--<div class="thumbnail">-->
                                                <!--<a href="product_details.html"><img src="themes/images/products/4.jpg"-->
                                                                                    <!--alt=""></a>-->
                                                <!--<div class="caption">-->
                                                    <!--<h5>Product name</h5>-->
                                                    <!--<h4><a class="btn" href="product_details.html">VIEW</a> <span-->
                                                            <!--class="pull-right">$222.00</span></h4>-->
                                                <!--</div>-->
                                            <!--</div>-->
                                        <!--</li>-->
                                        <!--<li class="span3">-->
                                            <!--<div class="thumbnail">-->
                                                <!--<a href="product_details.html"><img src="themes/images/products/5.jpg"-->
                                                                                    <!--alt=""></a>-->
                                                <!--<div class="caption">-->
                                                    <!--<h5>Product name</h5>-->
                                                    <!--<h4><a class="btn" href="product_details.html">VIEW</a> <span-->
                                                            <!--class="pull-right">$222.00</span></h4>-->
                                                <!--</div>-->
                                            <!--</div>-->
                                        <!--</li>-->
                                    <!--</ul>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<a class="left carousel-control" href="#featured" data-slide="prev">?</a>-->
                            <!--<a class="right carousel-control" href="#featured" data-slide="next">?</a>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<h4>Latest Products </h4>-->
                <!--<ul class="thumbnails">-->
                    <!--<li class="span3">-->
                        <!--<div class="thumbnail">-->
                            <!--<a href="product_details.html"><img src="themes/images/products/6.jpg" alt=""/></a>-->
                            <!--<div class="caption">-->
                                <!--<h5>Product name</h5>-->
                                <!--<p>-->
                                    <!--Lorem Ipsum is simply dummy text.-->
                                <!--</p>-->

                                <!--<h4 style="text-align:center"><a class="btn" href="product_details.html"> <i-->
                                        <!--class="icon-zoom-in"></i></a> <a class="btn" href="#">Add to <i-->
                                        <!--class="icon-shopping-cart"></i></a> <a class="btn btn-primary"-->
                                                                               <!--href="#">$222.00</a></h4>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</li>-->
                    <!--<li class="span3">-->
                        <!--<div class="thumbnail">-->
                            <!--<a href="product_details.html"><img src="themes/images/products/7.jpg" alt=""/></a>-->
                            <!--<div class="caption">-->
                                <!--<h5>Product name</h5>-->
                                <!--<p>-->
                                    <!--Lorem Ipsum is simply dummy text.-->
                                <!--</p>-->
                                <!--<h4 style="text-align:center"><a class="btn" href="product_details.html"> <i-->
                                        <!--class="icon-zoom-in"></i></a> <a class="btn" href="#">Add to <i-->
                                        <!--class="icon-shopping-cart"></i></a> <a class="btn btn-primary"-->
                                                                               <!--href="#">$222.00</a></h4>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</li>-->
                    <!--<li class="span3">-->
                        <!--<div class="thumbnail">-->
                            <!--<a href="product_details.html"><img src="themes/images/products/8.jpg" alt=""/></a>-->
                            <!--<div class="caption">-->
                                <!--<h5>Product name</h5>-->
                                <!--<p>-->
                                    <!--Lorem Ipsum is simply dummy text.-->
                                <!--</p>-->
                                <!--<h4 style="text-align:center"><a class="btn" href="product_details.html"> <i-->
                                        <!--class="icon-zoom-in"></i></a> <a class="btn" href="#">Add to <i-->
                                        <!--class="icon-shopping-cart"></i></a> <a class="btn btn-primary"-->
                                                                               <!--href="#">$222.00</a></h4>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</li>-->
                    <!--<li class="span3">-->
                        <!--<div class="thumbnail">-->
                            <!--<a href="product_details.html"><img src="themes/images/products/9.jpg" alt=""/></a>-->
                            <!--<div class="caption">-->
                                <!--<h5>Product name</h5>-->
                                <!--<p>-->
                                    <!--Lorem Ipsum is simply dummy text.-->
                                <!--</p>-->
                                <!--<h4 style="text-align:center"><a class="btn" href="product_details.html"> <i-->
                                        <!--class="icon-zoom-in"></i></a> <a class="btn" href="#">Add to <i-->
                                        <!--class="icon-shopping-cart"></i></a> <a class="btn btn-primary"-->
                                                                               <!--href="#">$222.00</a></h4>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</li>-->
                    <!--<li class="span3">-->
                        <!--<div class="thumbnail">-->
                            <!--<a href="product_details.html"><img src="themes/images/products/10.jpg" alt=""/></a>-->
                            <!--<div class="caption">-->
                                <!--<h5>Product name</h5>-->
                                <!--<p>-->
                                    <!--Lorem Ipsum is simply dummy text.-->
                                <!--</p>-->
                                <!--<h4 style="text-align:center"><a class="btn" href="product_details.html"> <i-->
                                        <!--class="icon-zoom-in"></i></a> <a class="btn" href="#">Add to <i-->
                                        <!--class="icon-shopping-cart"></i></a> <a class="btn btn-primary"-->
                                                                               <!--href="#">$222.00</a></h4>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</li>-->
                    <!--<li class="span3">-->
                        <!--<div class="thumbnail">-->
                            <!--<a href="product_details.html"><img src="themes/images/products/11.jpg" alt=""/></a>-->
                            <!--<div class="caption">-->
                                <!--<h5>Product name</h5>-->
                                <!--<p>-->
                                    <!--Lorem Ipsum is simply dummy text.-->
                                <!--</p>-->
                                <!--<h4 style="text-align:center"><a class="btn" href="product_details.html"> <i-->
                                        <!--class="icon-zoom-in"></i></a> <a class="btn" href="#">Add to <i-->
                                        <!--class="icon-shopping-cart"></i></a> <a class="btn btn-primary"-->
                                                                               <!--href="#">$222.00</a></h4>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</li>-->
                <!--</ul>-->

            </div>
        </div>
    </div>
</div>
<!--&lt;!&ndash; Footer ================================================================== &ndash;&gt;-->
<my-footer></my-footer>